@import "~material-design-icons/iconfont/material-icons.css";
@import '~@angular/material/_theming.scss';

$typo: mat-typography-config(
  $font-family: 'Roboto, sans-serif'
);

@include mat-core($typo);

$light-theme: mat-light-theme(
    mat-palette($mat-blue, 600, 100, 900),
    mat-palette($mat-orange),
    mat-palette($mat-deep-orange, A200)
);

$dark-theme: mat-dark-theme(
    mat-palette($mat-light-green),
    mat-palette($mat-light-blue),
    mat-palette($mat-deep-orange, A200)
);

$blue-theme:  (
  primary: mat-palette($mat-orange, 600),
  accent: mat-palette($mat-light-blue),
  warn: mat-palette($mat-deep-orange, A200),
  is-dark: true,
  foreground: (
    base:              white,
    divider:           $light-dividers,
    dividers:          $light-dividers,
    disabled:          $light-disabled-text,
    disabled-button:   rgba(white, 0.3),
    disabled-text:     $light-disabled-text,
    hint-text:         $light-disabled-text,
    secondary-text:    $light-secondary-text,
    icon:              white,
    icons:             white,
    text:              white,
    slider-min:        white,
    slider-off:        rgba(white, 0.3),
    slider-off-active: rgba(white, 0.3),
  ),
  background: (
    status-bar: black,
    app-bar:    map_get($mat-blue-grey, 900),
    background: map_get($mat-blue-grey, 800),
    hover:      rgba(white, 0.04),
    card:       map_get($mat-blue-grey, 700),
    dialog:     map_get($mat-blue-grey, 700),
    disabled-button: rgba(white, 0.12),
    raised-button: map-get($mat-blue-grey, 800),
    focused-button: $light-focused,
    selected-button: map_get($mat-blue-grey, 900),
    selected-disabled-button: map_get($mat-blue-grey, 800),
    disabled-button-toggle: black,
    unselected-chip: map_get($mat-blue-grey, 700),
    disabled-list-option: black,
  ),
);

$pink-theme:  (
  primary: mat-palette($mat-pink),
  accent: mat-palette($mat-light-blue),
  warn: mat-palette($mat-red),
  is-dark: false,
  foreground: (
    base:              black,
    divider:           $dark-dividers,
    dividers:          $dark-dividers,
    disabled:          $dark-disabled-text,
    disabled-button:   rgba(black, 0.26),
    disabled-text:     $dark-disabled-text,
    hint-text:         $dark-disabled-text,
    secondary-text:    $dark-secondary-text,
    icon:              rgba(black, 0.54),
    icons:             rgba(black, 0.54),
    text:              rgba(black, 0.87),
    slider-min:        rgba(black, 0.87),
    slider-off:        rgba(black, 0.26),
    slider-off-active: rgba(black, 0.38),
  ),
  background: (
    status-bar: map_get($mat-pink, 300),
    app-bar:    map_get($mat-pink, 100),
    background: map_get($mat-pink, 50),
    hover:      rgba(black, 0.04),
    card:       white,
    dialog:     white,
    disabled-button: rgba(black, 0.12),
    raised-button: white,
    focused-button: $dark-focused,
    selected-button: map_get($mat-pink, 300),
    selected-disabled-button: map_get($mat-pink, 400),
    disabled-button-toggle: map_get($mat-pink, 200),
    unselected-chip: map_get($mat-pink, 200),
    disabled-list-option: map_get($mat-pink, 200),
  ),
);

@import 'app/core/core.theme';
@import 'app/library/library.theme';
//@import 'app/my-music/my-music.theme';
@import 'app/player/player.theme';
@import 'app/playlists/playlists.theme';
@import 'app/settings/settings.theme';

@mixin custom-components-theme($theme) {
  @include core-theme($theme);
  @include library-component-theme($theme);
  //@include my-music-component-theme($theme);
  @include player-component-theme($theme);
  @include playlists-component-theme($theme);
  @include settings-theme($theme);
}

.light-theme {
  @include angular-material-theme($light-theme);
  @include custom-components-theme($light-theme);
}
.dark-theme {
  @include angular-material-theme($dark-theme);
  @include custom-components-theme($dark-theme);
}
.blue-theme {
  @include angular-material-theme($blue-theme);
  @include custom-components-theme($blue-theme);
}
.pink-theme {
  @include angular-material-theme($pink-theme);
  @include custom-components-theme($pink-theme);
}

body {
  font-family: Roboto, sans-serif;
}

app-root {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.carousel {
  .mat-tab-header {
    .mat-tab-labels {
      padding-left: 1rem;
    }
    .mat-tab-label {
      min-width: unset;
      width: 100px;
      box-sizing: content-box;
      padding: 0;
      mat-icon {
        margin-right: 0.5rem;
      }
    }
    .mat-tab-label-content {
      line-height: 0; // fix
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .mat-tab-group {
    height: 100%;
  }
  .mat-tab-body-wrapper {
    height: 100%;
  }
}

@media screen and (max-width: 598px) {
  .carousel {
    .mat-tab-header {
       border-bottom: none !important;
      .mat-tab-labels {
        padding-left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .mat-tab-label {
        width: 80px;
        height: 40px;
        mat-icon {
          margin-right: 0;
        }
        span {
          display: none;
        }
      }
    }
  }
}

// Fix search input length
.search {
  .mat-form-field-infix {
    width: auto;
  }
}

// Hide some controls.
@media screen and (min-width: 599px) {
  .a3 .controls .back {
    display: none;
  }
}
@media screen and (min-width: 959px) {
  .a3 .controls .back {
    display: block;
  }
  .a2 .controls .back {
    display: none;
  }
  .player .back {
    visibility: hidden;
  }
}
@media screen and (min-width: 1319px) {
  .a3 .controls .back {
    display: none;
  }
}

// Fix padding right on mat-list-items
.list {
  .mat-list-item-content {
    padding-right: 0.5rem !important;
  }
}
